<template>
  <el-container>
    <el-header
      style="
        height: 80px;
        top: 0;
        width: 100%;
        z-index: 100;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
      "
      class="main-header"
      :class="{ 'dark-header': isDark }"
    >
      <div
        @click="router.push('/')"
        style="display: flex; align-items: center; cursor: pointer"
      >
        <el-image
          style="height: 55px; width: 55px; margin-right: 20px"
          src="https://img.neptech.net/i/2025/06/20/j0u47g.webp"
        ></el-image>
        <span style="font-size: 30px">WoniuCFT管理系统</span>
      </div>
      <div class="right-header">
        <!-- 昼夜切换按钮 -->
        <el-switch
          v-model="darkSwitch"
          style="--el-switch-on-color: #333; margin: auto 20px"
          size="large"
          inline-prompt
          active-icon="Moon"
          inactive-icon="Sunny"
          @click="toggleTheme"
        />
        <!-- AI助手按钮 -->
        <a @click="drawer = true" style="cursor: pointer">AI助手</a>
        <el-icon style="margin-right: 20px" size="30">
          <Comment @click="drawer = true" style="cursor: pointer" />
        </el-icon>
        <UserComp />
      </div>
    </el-header>
    <el-container style="height: 100%">
      <el-aside
        style="
          width: 15%;
          min-width: 180px;
          border-right: 2px solid rgba(92, 92, 92, 0.521);
          height: calc(100vh - 80px);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        "
      >
        <MenuComp />
      </el-aside>
      <el-main class="body">
        <RouterView />
        <!-- <testScore /> -->
        <!-- <test /> -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import router from "@/router";
import MenuComp from "../components/common/MenuComp.vue";
import { useDark, useToggle } from "@vueuse/core";
const drawer = defineModel();
const isDark = useDark();
const toggleDark = useToggle(isDark);
const toggleTheme = (e: MouseEvent) => {
  const transition = document.startViewTransition(() => {
    toggleDark(); // 实际切换主题
  });
  transition.ready.then(() => {
    const x = e.clientX;
    const y = e.clientY;
    // 从点击点到窗口最远边缘的距离，这个距离即为圆的半径，用于确定一个圆形裁剪路径 (clip path) 的最大尺寸，以便覆盖整个视窗。
    // 勾股定理：a² + b² = c²
    const radius = Math.sqrt(
      Math.max(x, window.innerWidth - x) ** 2 +
        Math.max(y, window.innerHeight - y) ** 2
    ); //一个数的平方根

    const clipPath = [
      `circle(0 at ${x}px ${y}px)`,
      `circle(${radius}px at ${x}px ${y}px)`,
    ];
    // 实现过渡的过程 circle
    document.documentElement.animate(
      {
        clipPath: isDark.value ? clipPath.reverse() : clipPath,
      },
      {
        duration: 500,
        easing: "ease-in",
        pseudoElement: isDark.value
          ? "::view-transition-old(root)"
          : "::view-transition-new(root)",
      }
    );
  });
};
</script>
<style>
.el-header {
  height: 100px;
  display: flex;
  justify-content: right;
  align-items: center;
}

#menu {
  padding: 0 !important;
}
</style>
